/**
 * 菜单管理页面的JavaScript
 */
$(function() {
    // 初始化表格
    loadMenuTable();
    
    // 查询按钮点击事件
    $('#searchBtn').click(function() {
        loadMenuTable();
    });
    
    // 重置按钮点击事件
    $('#resetBtn').click(function() {
        $('#menuName').val('');
        $('#status').val('');
        loadMenuTable();
    });
    
    // 展开/折叠按钮点击事件
    let isExpanded = false;
    $('#expandAllBtn').click(function() {
        isExpanded = !isExpanded;
        if (isExpanded) {
            $('.menu-children').show();
        } else {
            $('.menu-children').hide();
        }
    });
    
    // 新增菜单按钮点击事件
    $('#addBtn').click(function() {
        // 重置表单
        $('#menuForm')[0].reset();
        $('#menuId').val('');
        
        // 加载上级菜单选项
        loadParentMenuOptions();
        
        // 根据菜单类型显示/隐藏相关字段
        updateFormByMenuType('M');
        
        $('#addEditMenuModalLabel').text('新增菜单');
        $('#addEditMenuModal').modal('show');
    });
    
    // 保存菜单按钮点击事件
    $('#saveMenuBtn').click(function() {
        // 表单验证
        if (!$('#menuForm')[0].checkValidity()) {
            $('#menuForm')[0].reportValidity();
            return;
        }
        
        // 收集表单数据
        var formData = {
            menuId: $('#menuId').val() || null,
            menuName: $('#modalMenuName').val(),
            parentId: $('#modalParentId').val(),
            orderNum: $('#modalOrderNum').val(),
            path: $('#modalPath').val(),
            component: $('#modalComponent').val(),
            menuType: $('#modalMenuType').val(),
            perms: $('#modalPerms').val(),
            icon: $('#modalIcon').val(),
            status: $('#modalStatus').val(),
            visible: $('#modalVisible').val(),
            remark: $('#modalRemark').val()
        };
        
        // 发送请求到后端保存菜单
        $.ajax({
            url: '/system/menu/' + ($('#menuId').val() ? 'update' : 'add'),
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            success: function(res) {
                if (res.code === 200) {
                    alert('操作成功');
                    $('#addEditMenuModal').modal('hide');
                    loadMenuTable();
                } else {
                    alert('操作失败: ' + res.msg);
                }
            },
            error: function() {
                alert('服务器错误，请稍后再试');
            }
        });
    });
    
    // 菜单类型变更事件
    $('#modalMenuType').change(function() {
        var menuType = $(this).val();
        updateFormByMenuType(menuType);
    });
    
    // 图标选择按钮点击事件
    $('#selectIconBtn').click(function() {
        // 这里可以实现一个图标选择器，或者跳转到图标选择页面
        alert('图标选择功能待实现');
    });
    
    // 图标输入框变更事件，实时预览图标
    $('#modalIcon').on('input', function() {
        var iconClass = $(this).val();
        if (iconClass) {
            $('#iconPreview').attr('class', iconClass);
        } else {
            $('#iconPreview').attr('class', 'fas fa-bars');
        }
    });
    
    // 表格中的查看按钮点击事件
    $(document).on('click', '.view-btn', function() {
        var menuId = $(this).data('id');
        viewMenuDetail(menuId);
    });
    
    // 表格中的编辑按钮点击事件
    $(document).on('click', '.edit-btn', function() {
        var menuId = $(this).data('id');
        editMenu(menuId);
    });
    
    // 表格中的删除按钮点击事件
    $(document).on('click', '.delete-btn', function() {
        var menuId = $(this).data('id');
        var menuName = $(this).data('name');
        deleteMenu(menuId, menuName);
    });
});

/**
 * 加载菜单表格数据
 */
function loadMenuTable() {
    // 显示加载中
    $('#menuTable tbody').html('<tr><td colspan="9" class="text-center">加载中...</td></tr>');
    
    // 获取查询参数
    var params = {
        menuName: $('#menuName').val(),
        status: $('#status').val()
    };
    
    // 发送请求获取菜单数据
    $.ajax({
        url: '/system/menu/list',
        type: 'GET',
        data: params,
        success: function(res) {
            if (res.code === 200) {
                renderMenuTable(res.data);
            } else {
                $('#menuTable tbody').html('<tr><td colspan="9" class="text-center">加载失败: ' + res.msg + '</td></tr>');
            }
        },
        error: function() {
            $('#menuTable tbody').html('<tr><td colspan="9" class="text-center">服务器错误，请稍后再试</td></tr>');
        }
    });
}

/**
 * 渲染菜单表格
 * @param {Array} menus 菜单数据
 */
function renderMenuTable(menus) {
    if (!menus || menus.length === 0) {
        $('#menuTable tbody').html('<tr><td colspan="9" class="text-center">暂无数据</td></tr>');
        return;
    }
    
    var html = '';
    
    // 递归渲染菜单树
    function renderMenus(menuList, level) {
        menuList.forEach(function(menu) {
            // 菜单类型文本
            var menuTypeText = '';
            var menuTypeClass = '';
            switch (menu.menuType) {
                case 'M':
                    menuTypeText = '目录';
                    menuTypeClass = 'badge badge-primary';
                    break;
                case 'C':
                    menuTypeText = '菜单';
                    menuTypeClass = 'badge badge-success';
                    break;
                case 'F':
                    menuTypeText = '按钮';
                    menuTypeClass = 'badge badge-warning';
                    break;
                default:
                    menuTypeText = '未知';
                    menuTypeClass = 'badge badge-secondary';
            }
            
            // 状态文本
            var statusText = menu.status === '0' ? '<span class="status-active">正常</span>' : '<span class="status-inactive">停用</span>';
            
            // 菜单名称缩进
            var menuNameHtml = '<span class="menu-level-' + level + '">';
            if (level > 0) {
                menuNameHtml += '<i class="fas fa-level-up-alt fa-rotate-90 mr-1"></i>';
            }
            menuNameHtml += menu.menuName + '</span>';
            
            // 图标显示
            var iconHtml = menu.icon ? '<i class="' + menu.icon + '"></i>' : '';
            
            // 操作按钮
            var actions = '<button class="btn btn-sm btn-info view-btn mr-1" data-id="' + menu.menuId + '">查看</button>' +
                          '<button class="btn btn-sm btn-primary edit-btn mr-1" data-id="' + menu.menuId + '">编辑</button>' +
                          '<button class="btn btn-sm btn-danger delete-btn" data-id="' + menu.menuId + '" data-name="' + menu.menuName + '">删除</button>';
            
            html += '<tr' + (level > 0 ? ' class="menu-children"' : '') + '>';
            html += '<td>' + menuNameHtml + '</td>';
            html += '<td>' + iconHtml + '</td>';
            html += '<td>' + menu.orderNum + '</td>';
            html += '<td>' + (menu.perms || '') + '</td>';
            html += '<td>' + (menu.path || '') + '</td>';
            html += '<td><span class="' + menuTypeClass + '">' + menuTypeText + '</span></td>';
            html += '<td>' + statusText + '</td>';
            html += '<td>' + (menu.createTime || '') + '</td>';
            html += '<td>' + actions + '</td>';
            html += '</tr>';
            
            // 递归处理子菜单
            if (menu.children && menu.children.length > 0) {
                renderMenus(menu.children, level + 1);
            }
        });
    }
    
    renderMenus(menus, 0);
    $('#menuTable tbody').html(html);
}

/**
 * 加载上级菜单选项
 */
function loadParentMenuOptions() {
    $.ajax({
        url: '/system/menu/treeselect',
        type: 'GET',
        success: function(res) {
            if (res.code === 200) {
                var options = '<option value="0">主目录</option>';
                
                // 递归构建选项
                function buildOptions(menus, level) {
                    menus.forEach(function(menu) {
                        // 只有目录和菜单可以作为父级
                        if (menu.menuType !== 'F') {
                            var prefix = '';
                            for (var i = 0; i < level; i++) {
                                prefix += '　';  // 使用全角空格作为缩进
                            }
                            if (level > 0) {
                                prefix += '├─ ';
                            }
                            
                            options += '<option value="' + menu.menuId + '">' + prefix + menu.menuName + '</option>';
                            
                            // 递归处理子菜单
                            if (menu.children && menu.children.length > 0) {
                                buildOptions(menu.children, level + 1);
                            }
                        }
                    });
                }
                
                buildOptions(res.data, 0);
                $('#modalParentId').html(options);
            }
        }
    });
}

/**
 * 根据菜单类型更新表单显示
 * @param {String} menuType 菜单类型
 */
function updateFormByMenuType(menuType) {
    switch (menuType) {
        case 'M':  // 目录
            $('#iconRow').show();
            $('#pathRow').show();
            $('#componentRow').hide();
            $('#permRow').hide();
            $('#visibleRow').show();
            break;
        case 'C':  // 菜单
            $('#iconRow').show();
            $('#pathRow').show();
            $('#componentRow').show();
            $('#permRow').show();
            $('#visibleRow').show();
            break;
        case 'F':  // 按钮
            $('#iconRow').hide();
            $('#pathRow').hide();
            $('#componentRow').hide();
            $('#permRow').show();
            $('#visibleRow').hide();
            break;
    }
}

/**
 * 查看菜单详情
 * @param {Number} menuId 菜单ID
 */
function viewMenuDetail(menuId) {
    $.ajax({
        url: '/system/menu/getInfo/' + menuId,
        type: 'GET',
        success: function(res) {
            if (res.code === 200) {
                var menu = res.data;
                
                // 菜单类型文本
                var menuTypeText = '';
                switch (menu.menuType) {
                    case 'M': menuTypeText = '目录'; break;
                    case 'C': menuTypeText = '菜单'; break;
                    case 'F': menuTypeText = '按钮'; break;
                    default: menuTypeText = '未知';
                }
                
                // 状态文本
                var statusText = menu.status === '0' ? '<span class="status-active">正常</span>' : '<span class="status-inactive">停用</span>';
                var visibleText = menu.visible === '0' ? '显示' : '隐藏';
                
                // 构建详情HTML
                var detailsHtml = `
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>菜单名称：</strong> ${menu.menuName}
                        </div>
                        <div class="col-md-6">
                            <strong>菜单类型：</strong> ${menuTypeText}
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>显示排序：</strong> ${menu.orderNum}
                        </div>
                        <div class="col-md-6">
                            <strong>状态：</strong> ${statusText}
                        </div>
                    </div>`;
                
                // 根据菜单类型显示不同字段
                if (menu.menuType === 'M' || menu.menuType === 'C') {
                    detailsHtml += `
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <strong>路由地址：</strong> ${menu.path || ''}
                            </div>
                            <div class="col-md-6">
                                <strong>显示状态：</strong> ${visibleText}
                            </div>
                        </div>`;
                    
                    if (menu.icon) {
                        detailsHtml += `
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <strong>菜单图标：</strong> <i class="${menu.icon}"></i> ${menu.icon}
                                </div>
                            </div>`;
                    }
                }
                
                if (menu.menuType === 'C') {
                    detailsHtml += `
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <strong>组件路径：</strong> ${menu.component || ''}
                            </div>
                        </div>`;
                }
                
                if (menu.menuType === 'C' || menu.menuType === 'F') {
                    detailsHtml += `
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <strong>权限标识：</strong> ${menu.perms || ''}
                            </div>
                        </div>`;
                }
                
                detailsHtml += `
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <strong>备注：</strong> ${menu.remark || ''}
                        </div>
                    </div>`;
                
                $('#menuDetails').html(detailsHtml);
                $('#menuModal').modal('show');
            } else {
                alert('获取菜单详情失败: ' + res.msg);
            }
        },
        error: function() {
            alert('服务器错误，请稍后再试');
        }
    });
}

/**
 * 编辑菜单
 * @param {Number} menuId 菜单ID
 */
function editMenu(menuId) {
    // 加载上级菜单选项
    loadParentMenuOptions();
    
    // 获取菜单详情
    $.ajax({
        url: '/system/menu/getInfo/' + menuId,
        type: 'GET',
        success: function(res) {
            if (res.code === 200) {
                var menu = res.data;
                
                // 填充表单
                $('#menuId').val(menu.menuId);
                $('#modalMenuName').val(menu.menuName);
                $('#modalParentId').val(menu.parentId);
                $('#modalOrderNum').val(menu.orderNum);
                $('#modalPath').val(menu.path);
                $('#modalComponent').val(menu.component);
                $('#modalMenuType').val(menu.menuType);
                $('#modalPerms').val(menu.perms);
                $('#modalIcon').val(menu.icon);
                $('#modalStatus').val(menu.status);
                $('#modalVisible').val(menu.visible);
                $('#modalRemark').val(menu.remark);
                
                // 更新图标预览
                if (menu.icon) {
                    $('#iconPreview').attr('class', menu.icon);
                } else {
                    $('#iconPreview').attr('class', 'fas fa-bars');
                }
                
                // 根据菜单类型显示/隐藏相关字段
                updateFormByMenuType(menu.menuType);
                
                $('#addEditMenuModalLabel').text('编辑菜单');
                $('#addEditMenuModal').modal('show');
            } else {
                alert('获取菜单详情失败: ' + res.msg);
            }
        },
        error: function() {
            alert('服务器错误，请稍后再试');
        }
    });
}

/**
 * 删除菜单
 * @param {Number} menuId 菜单ID
 * @param {String} menuName 菜单名称
 */
function deleteMenu(menuId, menuName) {
    if (confirm('确定要删除菜单 "' + menuName + '" 吗？如果存在子菜单，将无法删除。')) {
        $.ajax({
            url: '/system/menu/delete/' + menuId,
            type: 'DELETE',
            success: function(res) {
                if (res.code === 200) {
                    alert('删除成功');
                    loadMenuTable();
                } else {
                    alert('删除失败: ' + res.msg);
                }
            },
            error: function() {
                alert('服务器错误，请稍后再试');
            }
        });
    }
} 